<template>
  <Modal
    class="user-operate-modal"
    :visible="innerVisible"
    :closable="false"
    :footer="null"
    :width="450"
  >
    <div class="u-pic u-multiple"></div>
    <template v-if="childrenDom">
      <slot></slot>
    </template>
    <template v-else>
      <p>当前账号在其他设备上登录</p>
      <p>点击确定重新登陆</p>
      <div class="btn">
        <Button type="primary" @click="goToLogin">确定</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { Modal, Button } from 'ant-design-vue'

export default {
  name: 'UserStatusModal',
  components: {
    Modal,
    Button
  },
  props: {
    modalCloseEvent: {
      type: Function,
      default: undefined
    },
    dispatch: {
      type: Function,
      default: undefined
    },
    showModal: {
      type: Boolean,
      default: undefined
    },
    childrenDom: {
      type: null,
      default: null
    }
  },
  data() {
    const hasShowModalProperty = this.$props.hasOwnProperty('showModal')
    const defaultVisible = hasShowModalProperty ? this.showModal : true
    return {
      innerVisible: defaultVisible
    }
  },
  watch: {
    showModal(newVal) {
      if (newVal) {
        this.innerVisible = true
      }
    }
  },
  methods: {
    closeModal() {
      this.innerVisible = false
    },
    goToLogin() {
      this.innerVisible = false
      if (this.modalCloseEvent && typeof this.modalCloseEvent === 'function') {
        this.modalCloseEvent()
      } else if (this.dispatch) {
        this.dispatch({
          type: 'login/goLogin'
        })
      } else {
        window.location.href = '/user/login'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-operate-modal {
  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
